<template>
	<view class="root">
		<!-- 自定义头部 -->
		<view class="header_nav">
			<view class="status_bar" :style="{height:recHeight+'px'}"></view><!-- 状态栏 -->
			<view class="header_title" :style="{height:titleBarHeight+'px',top:recHeight+'px',lineHeight:titleBarHeight +'px'}">
				<!-- 顶部导航栏 -->
				<view class="_font-18 _pos-rel _flex-row-mid" style="color: #101010;">
					<navigator open-type="navigateBack" class="_font-18 _pad-x-15 iconfont icon-zuo"></navigator>提交订单
				</view>
			</view>
			<view class="_w-max img" :style="{height:headerHeight+'px'}"></view>
		</view>
		<view class="_w-max" :style="{height:headerHeight+'px'}"></view>
		<view class="index">
			<!-- 新单 status -->
			<view class="car-img-box">
				<image class="car-img" :src="car_info.pic" mode="aspectFit"></image>
				<text class="title _w-max _font-18">{{car_info.type_name}}</text>
				<view class="label _flex-row-mid _w-max _mar-top-10">
					<view class="_flex-row-mid _font-12 _mar-right-20" style="color: rgba(6, 6, 6, 0.5);font-weight: 600;" v-if="true">
						<image class="_mar-right-5" style="width: 24rpx;height: 24rpx;opacity: 0.6;" src="https://taxi.raxan.xyz/wechat/static/images/auto.png" mode="widthFix"></image>
						<text>{{car_info.gear=='auto'?'自动挡':'手动挡'}}</text>
					</view>
					<view class="_flex-row-mid _font-12 _mar-right-20" style="color: rgba(6, 6, 6, 0.5);" v-if="true">
						<image class="_mar-right-5" style="width: 24rpx;height: 24rpx;opacity: 0.6;" src="https://taxi.raxan.xyz/wechat/static/images/weizhi.png" mode="widthFix"></image>
						<text>{{car_info.seat_num}}座</text>
					</view>
					<view class="_flex-row-mid _font-12 _mar-right-20" style="color:rgba(6, 6, 6, 0.5);" v-if="true">
						<image class="_mar-right-5" style="width: 24rpx;height: 24rpx;opacity: 0.6;" src="https://taxi.raxan.xyz/wechat/static/images/fadonji.png" mode="widthFix"></image>
						<text>{{car_info.power}}</text>
					</view>
				</view>
			</view>
			<!-- 取还车地址 -->
			<view class="order-info" v-if="true">
				<!-- md_pin_drop.png -->
				<view class="address _w-max _pad-bottom-15" style="font-weight: 600;">
					<view class="_flex-row-bet-mid _mar-bottom-15">
						<view>
							<text class="_pad-right-15">取车地址</text>
							<text style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{{DateTimeSite.city_name}}{{DateTimeSite.area_name}}</text>
						</view>
						<navigator class="_flex-row-center-mid" :url="`/pages/car_sub/map/index?latitude=${DateTimeSite.take_latitude}&longitude=${DateTimeSite.take_longitude}&poiaddress=${DateTimeSite.area_name}`">
							<view class="">
								<image style="width: 40rpx;height: 40rpx;" src="https://taxi.raxan.xyz/wechat/static/images/md_pin_drop.png" mode="widthFix"></image>
							</view>
						</navigator>
					</view>
					<view class="_flex-row-bet-mid">
						<view>
							<text class="_pad-right-15">还车地址</text>
							<text style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{{DateTimeSite.black_city_name}}{{DateTimeSite.black_area_name}}</text>
						</view>
						<navigator class="_flex-row-center-mid" :url="`/pages/car_sub/map/index?latitude=${DateTimeSite.black_latitude}&longitude=${DateTimeSite.black_longitude}&poiaddress=${DateTimeSite.black_area_name}`">
							<view class="">
								<image style="width: 40rpx;height: 40rpx;" src="https://taxi.raxan.xyz/wechat/static/images/md_pin_drop.png" mode="widthFix"></image>
							</view>
						</navigator>
					</view>
				</view>
				<view class="time _pad-y-15 _flex-row-mid" style="font-weight: 600;">
					<text class="_pad-right-10">租车时间:</text>
					<text>{{DateTimeSite.starMon}}月{{DateTimeSite.starDay}}日 {{DateTimeSite.starTime}}</text>
					<view class="_pos-rel _flex-row _mar-x-10">
						<image style="width: 48rpx;height: 35rpx;" src="https://taxi.raxan.xyz/wechat/static/images/icon-99.png" mode="widthFix"></image>
						<text class="_pos-abs _font-12" style="top: -6rpx;">{{DateTimeSite.days}}</text>
					</view>
					<text>{{DateTimeSite.endMon}}月{{DateTimeSite.endDay}}日 {{DateTimeSite.endTime}}</text>
				</view>
				<view class="_mar-top-15 _flex-row-mid" style="color: #FD4949;">
					<view class="_flex-row-mid" v-if="DateTimeSite.is_visit">
						<view class="iconfont icon-duihao _flex-row-center-mid" style="font-size: 22rpx;border: 1rpx solid linear-gradient(-88.58deg,var(--theme-color-left),var(--theme-color-right));border-radius: 50%;"></view>
						<view class="_pad-left-5">上门送取车</view>
					</view>
					<view class="_flex-row-mid" style="margin-left: 36rpx;">
						<view class="iconfont icon-duihao _flex-row-center-mid" style="font-size: 22rpx;border: 1rpx solid linear-gradient(-88.58deg,var(--theme-color-left),var(--theme-color-right));border-radius: 50%;"></view>
						<view class="_pad-left-5">免费取消({{ storeInfo.cancelTime }})</view>
					</view>
				</view>
			</view>
			<!-- 用车人 -->
			<navigator class="use-car _flex-row-bet-mid" v-if="true" :url="'/pages/car_sub/auth/list?contact_id='+contact_id+'&contact_name='+contact_name+'&contact_phone='+contact_phone" hover-class="none">
				<view class="left" style="color: #101010;font-size: 36rpx;font-weight: 600;">用车人
					<text style="margin-left: 36rpx;color: #999;font-size: 24rpx;" v-if="contact_id==0">补充本人信息</text>
					<text style="margin-left: 36rpx;color: #333;font-size: 26rpx;" v-else>
						<text>{{contact_name}}</text>
						<text>{{contact_phone}}</text>
					</text>
				</view>
				<view class="right">
					<text v-text="use_car_info?'更改':'添加'"></text>
					<text class="iconfont icon-jiantou"></text>
				</view>
			</navigator>
			<!-- 租车保障 -->
			<view class="guarantee" v-if="true">
				<view class="title">
					<view style="font-size: 36rpx; color: #101010;font-weight: 600;">租车保障</view>
					<navigator :url="`/pages/car_sub/article/index?id=5`">
						<view class="theme-color" style="font-size: 24rpx;">
							<text>如何保障</text>
							<text class="iconfont icon-jiantou" style="font-size: 24rpx;"></text>
						</view>
					</navigator>
				</view>
				<view class="item" v-if="false">
					<view class="left">
						<view class="sort-title">
							<text>基本保障服务费</text>
							<!-- <text class="iconfont icon-zhuyi-copy"></text> -->
						</view>
						<view class="txt">租赁过程中的车辆损失，您无法承担1500元以内的维修费用</view>
					</view>
					<view class="right">
						<view class="num">￥80</view>
						<view class="label" v-if="true">已含</view>
						<view class="label _font-11" style="color: #333;" v-else>
							<label>
								<checkbox-group name="" @change="changeCheck">
									<label>
										<checkbox :value="'1'" />
									</label>
								</checkbox-group>
							</label>
						</view>
					</view>
				</view>
				<radio-group @change="radioChange">
					<view class="item" v-for="(item,index) in order_data.car_service" :key="index" @click="selectService(index)">
						<view class="left">
							<view class="sort-title">
								<text>{{item.name}}</text>
								<!-- <text class="iconfont icon-zhuyi-copy"></text> -->
							</view>
							<view class="txt">{{item.remark}}</view>
						</view>
						<view class="right">
							<view class="num">￥{{item.price}}</view>
							<view class="label" v-if="false">已含</view>
							<view class="label _font-11" style="color: #333;" v-else>
								<label class="radio">
									<radio :value="index" :checked="item.is_select"/>
								</label>
							</view>
						</view>
					</view>
				</radio-group>
			</view>
			<!-- 选择优惠券 -->
			<view class="coupon" v-if="true">
				<view class="title">选择优惠
					<!-- <text class="iconfont icon-zhuyi-copy"></text> -->
				</view>
				<view @tap="couponTap" class="search-coupon">
					<view class="sort-title">优惠券</view>
					<view class="num">
						<text class="price">{{couponTitle}}</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<!-- 使用佣金 -->
				<view class="integral" v-if="false">
					<view class="sort-title">
						<text>抵用金</text>
						<text class="label">(100低佣金可抵用1元)</text>
					</view>
					<switch color="#BE9D78" @change="changeSwitch" style="transform:scale(0.7)" />
				</view>
			</view>
			<!-- 免押金 -->
			<view class="deposit">
				<view class="title">
					<view class="text">押金须知</view>
				</view>
				<!-- <view class="li-1">
					<view class="sort-title">到店付押金</view>
					<view class="text">到店之后需要出示您的芝麻信用分给车管家，满足条件后即可免押金</view>
				</view> -->
				<view class="li-2">
					<!-- <view class="sort-title _pad-bottom-5">押金说明</view> -->
					<view class="content">
						<view class="item">
							<view class="left">租车押金</view>
							<view class="right">
								<view class="price">
									<text>{{car_info.illegal_deposit}}元 <text class="_pad-left-10 theme-color" style="font-weight: 600;">可退</text></text>
								</view>
								<view class="remark">取车时冻结， 若无车损，还车时解冻</view>
							</view>
						</view>
						<view class="item">
							<view class="left">违章押金</view>
							<view class="right">
								<view class="price">
									<text>{{car_info.deposit}}元 <text class="_pad-left-10 theme-color" style="font-weight: 600;">可退</text></text>
								</view>
								<view class="remark">取车时冻结， 若无违章，还车后30天左右解冻</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单须知 -->
			<view class="rules">
				<view class="title">预定须知</view>
				<view class="li-1">
					<view class="left">
						<view class="sort-title">取车证件</view>
					</view>
					<view class="right">
						<view class="sort-title">取车是，请携带一下驾驶人本人证件:</view>
						<view class="table">
							<view class="tr">
								<view>二代身份证</view>
								<view style="width: 328rpx;color: #999;">{{ two_identity_card }}</view>
							</view>
							<view class="tr">
								<view>驾照</view>
								<view style="width: 328rpx;color: #999;">{{ driving_license }}</view>
							</view>
							<view class="tfoot">需要中国大陆驾照原件取车</view>
						</view>
					</view>
				</view>
				<view class="li-2" style="display: none;">
					<view class="left">
						<view class="sort-title">取消规则</view>
					</view>
					<view class="right">
						<view class="table">
							<view class="thead">
								<view class="left">取消时间</view>
								<view class="right">扣费标准</view>
							</view>
							<view class="tr" v-for="(item,index) in cancellation_rule" :key="index">
								<view class="left _flex-col">
									<text>{{ item.cancel_time }}</text>
									<!-- <text style="font-size: 24rpx;color: #999;">取车前2小时-取车时间</text> -->
								</view>
								<view class="right _flex-col">
									<text>{{ item.deduction_standard }}</text>
									<!-- <text style="font-size: 24rpx;color: #999;">(最高150元)</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="li-3" v-for="(item,index) in reserve_notice" :key="index">
					<view class="left">
						<view class="sort-title">{{ item.title }}</view>
					</view>
					<view class="right">
						<text>{{ item.content }}</text>
					</view>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="contact _flex-row-bet-mid">
				<view class="left">联系方式</view>
				<view class="right _flex-row-mid">
					<text style="color: #999;font-size: 26rpx;">{{ storeInfo.contact_tel }}</text>
					<button class="call-phone theme-color-bg" @click="callPhone(storeInfo.contact_tel)">拨打</button>
				</view>
			</view>
			<!-- 合同 -->
			<view class="contract _flex-row-bet-mid" style="display: none;">
				<view class="left _flex-row-mid">请在线上签署
					<text class="theme-color" >租车合同</text>
				</view>
				<view class="right">
					<text class="iconfont icon-jiantou" style="font-size: 22rpx;"></text>
				</view>
			</view>
			<!-- 新单 end -->

			<!-- 续租 status-->
			<view class="xuzhu" v-if="false">
				<view class="now">
					<text>当前还车时间</text>
					<text>{{oldDateTime}}</text>
				</view>
				<view class="revise" @click="showTimePicker(1,1)">
					<text>更改还车时间</text>
					<text class="iconfont icon-jiantou" v-if="DateTime.endDate==''"></text>
					<text class="" v-else>{{newDateTime}}</text>
				</view>
			</view>
			<!-- 续租 end -->

		</view>
		<!-- 提交订单 -->
		<view class="pay">
			<!-- 明细 -->
			<view class="left">
				<view class="price" @click="show_order_detail=!show_order_detail">
					<text class="num">￥{{order_data.fee.price||''}}</text>明细
					<view class="_pos-rel icon">
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<view class="remark">含手续费/车辆整备费{{order_data.fee.service_cost}}元</view>
			</view>
			<view :class="{'right':is_new_order==0,'right-xuzhu':is_new_order==1}" @click="submit(is_new_order)">{{'提交订单'}}</view>
		</view>
		<!-- 去认证弹窗 -->
		<auth v-if="show_auth"></auth>
		<!-- 价格明细 -->
		<view class="price_detail" v-if="show_order_detail" @click="show_order_detail=!show_order_detail">
			<!-- <view class=""></view> -->
			<view class="detail" @click.stop="">
				<view class="_w-max title">价格明细</view>
				<view class="_w-max _pad-x-10" style="color: #101010;font-size: 28rpx;font-weight: 600;">
					<view class="_w-max _mar-top-20 _flex-col" style="border-bottom: 1rpx dashed rgba(221, 221, 221, 1);">
						<view class="_pad-bottom-15 _flex-row-bet-mid">
							<text>租车费用</text>
							<text>￥{{order_data.fee.car_fee}}</text>
						</view>
						<view class="_pad-bottom-15 _flex-row-bet-mid" v-if="order_data.fee.night_all_price>0">
							<text>夜间服务费</text>
							<text>￥{{order_data.fee.night_all_price}}</text>
						</view>
						<view class="_pad-bottom-15 _flex-row-bet-mid" v-if="order_data.fee.other_places_fee>0">
							<text>跨服务点/跨城还车费用</text>
							<text>￥{{order_data.fee.other_places_fee}}</text>
						</view>
						<view class="_pad-bottom-15 _flex-row-bet-mid" v-if="order_data.fee.visit>0">
							<text>上门送取车费用</text>
							<text>￥{{order_data.fee.visit}}</text>
						</view>
						<view class="_pad-bottom-15 _flex-row-bet-mid">
							<text>车行手续费/车辆整备费</text>
							<text>￥{{order_data.fee.service_cost}}</text>
						</view>
						<view class="_pad-bottom-15 _flex-row-bet-mid" v-if="item.is_select" v-for="(item,index) in order_data.car_service" :key="index">
							<text>{{item.name}}</text>
							<text>￥{{item.price}}</text>
						</view>
					</view>
				</view>
				<view class="_pad-x-10 _mar-top-15">
					<view class="_pad-bottom-15 _flex-row-bet-mid" style="color: #F7442C;" v-if="couponId>0">
						<text>优惠券</text>
						<text>{{couponTitle}}</text>
					</view>
					<view class="_flex-row-bet-mid _font-18" style="font-weight: 600;">
						<text style="color: #101010;">实际订单总额</text>
						<text style="color: #F7442C;">￥{{order_data.fee.price}}</text>
					</view>
				</view>
				<view class="_mar-top-20 _pad-x-10 _pad-right-30" style="color: #999;font-size: 26rpx;">
					<view>费用说明</view>
					<view style="margin-top: 8rpx;">车行手续费用：门店收取手续费用用于车辆清洁、车辆保养、单据制作、人员服务等</view>
					<view style="margin-top: 8rpx;" v-if="order_data.fee.price === 0.01">其他说明：当费用小于等于0元时至少需支付0.01元</view>
				</view>
			</view>
		</view>
		<view class="_flex-row-mid">
			<checkbox-group class="_w-max _mar-top-10 _mar-left-10" @change="checkboxChange">
				<label class="label-item _flex-row-mid">
					<checkbox :value="1" :checked="false"></checkbox>
					<text>我已阅读并同意</text>
					<navigator @click.stop="" :url='`/pages/car_sub/order/handler/contract?id=${7}`' style="color: #52A1EC;" v-text="'《租车服务合同》'"></navigator>
					<text>及</text>
					<navigator @click.stop="" :url='`/pages/car_sub/order/handler/contract?id=${8}`' style="color: #52A1EC;" v-text="'《服务协议》'"></navigator>
				</label>
			</checkbox-group>
		</view>
		<couponListWindow :coupon="coupon" @ChangCouponsClone="ChangCouponsClone" :openType='openType' @ChangCoupons="ChangCoupons"></couponListWindow>
		<timePicker ref="timePicker" @getTime='getTime'></timePicker>
	</view>
</template>

<script>
	import auth from './authWindows.vue';
	import timePicker from '@/pages/car_sub/order/handler/timePicker.vue';
	import {
		getCarTypeInfo,
		getCareFee,
		getcarService,
		get_use_coupon_list,
		creatCarOrder,
		getStoreInfo,
		getclientConfig
	} from '@/api/car.js';
	import couponListWindow from "@/components/couponListWindow";

	import {
		getCoupons
	} from "@/api/api.js";
	import {
		orderConfirm,
		getCouponsOrderPrice,
		orderCreate,
		postOrderComputed
	} from '@/api/order.js';
	import { formatDate } from 'tough-cookie';
	export default {
		components: {
			auth,
			timePicker,
			couponListWindow,
		},
		data() {
			return {
				recHeight: '', //状态栏高度
				titleBarHeight: '', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '', //顶部距离
				headerHeight: '', //头部总高度

				show_auth: false,
				is_new_order: 0, //新订单、续租,
				show_order_detail: false, //显示明细
				use_car_info: false, //判断添加、修改用车人
				car_type_id: 0,
				//获取主页的地点、时间
				DateTimeSite: {},
				orderTime: {},
				store_id: 0,
				order_data: {
					fee: {}, //基础费用
					car_service: {} //保险费用
				},
				is_submit:false,  //提交锁


				DateTime: {
					days: 1, //两日期相差的天数
					starStamp: null, //取车时间（时间戳）
					endStamp: null, //还车时间（时间戳）
					starMon: null, //取车月份
					endMon: null, //还车月份
					starDay: null, //取车日
					endDay: null, //还车日
					starTime: null, //取车时间
					endTime: null, //还车时间
					end_time: '', //还车时间日期列表
					start_time: '', //取车时间日期列表
					startDate: '',
					endDate: ''
				},
				car_info: {},
				oldDateTime: '2023-03-11 11:13',
				newDateTime: '',

				coupon: {
					coupon: false,
					list: [],
				},
				openType: 1, //优惠券打开方式 1=使用
				couponTitle: '请选择优惠券',
				couponId: 0, //优惠券id
				coupon_price: 0, //优惠券 券值
				use_min_price: 0 ,//满多少价格可使用
				contact_id:0,
				contact_name:'',
				contact_phone:'',
				pre_radio_index:'',
				storeInfo:{},
				driving_license: '',
				reserve_notice:[],
				two_identity_card: '',
				cancellation_rule: [],
				checkValue: ''
			};
		},
		onLoad(e) {
			if (e.type_id) {
				this.car_type_id = e.type_id;
			}
			this.store_id = e.store_id;
			this.DateTimeSite = JSON.parse(e.param);
			this.orderTime = JSON.parse(e.date);
			uni.hideTabBar();
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height; //小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top; //顶部距离
			this.getPhoneInfo();
			this.getCarTypeInfo();
			this.getCareFee();
			this.getcarService();
			this.getStoreInfo();
			this.getSysConfig();
		},
		methods: {
			checkboxChange(e){
				this.checkValue = e.detail.value;
			},
			getSysConfig(){
				let that = this;
				getclientConfig().then((res)=>{
					let data = res.data;
					that.driving_license = data.driving_license;
					that.two_identity_card = data.two_identity_card;
					that.reserve_notice = data.reserve_notice;
					that.cancellation_rule = data.cancellation_rule;
				})
			},
			//提交订单
			submit(){
				var that = this;
				if(that.checkValue == '') return that.$util.Tips({ title: '请勾选同意协议' })
				var order_site = that.DateTimeSite;
				let parmes = {
					type_id:that.car_type_id,                             //车型id
					contact_id:that.contact_id,                           //下单人
					take_city_id:order_site.city_id,                      //取车城市
					return_city_id:order_site.black_city_id,              //还车城市
					store_id:that.store_id,                               //下单门店
					take_place_id:order_site.area_id,                     //取车服务点
					take_title:order_site.city_name+order_site.area_name, //取车点名称
					take_latitude:order_site.take_latitude,               //取车点纬度
					take_longitude:order_site.take_longitude,             //取车经度
					return_place_id:order_site.black_area_id,             //还车服务点
					return_title:order_site.black_city_name+order_site.black_area_name, //还车点名称
					return_latitude:order_site.black_latitude,            //还车纬度
					return_longitude:order_site.black_longitude,          //还车经度
					start_time:that.orderTime.starStamp,                  //开始时间
					end_time:that.orderTime.endStamp,                     //结束时间
					fee:that.order_data.fee,                              //费用
					car_service:that.order_data.car_service,              //服务费
					coupon_user_id:that.couponId,                         //优惠券id
					coupon_price:that.coupon_price,                       //优惠金额
					is_visit:order_site.is_visit,       //是否上门送取车
					is_other_places: order_site.is_other_places, //是否异店还车
				}
				if(that.is_submit) return uni.showToast({title:'提交过于频繁，请稍后~',icon:'none'});
				uni.showModal({
				    title: '提示',
				    content: '确定要提交订单吗？',
				    success: function (res) {
				        if (res.confirm) {
							//提交确认
							uni.showLoading();
							that.is_submit=true;
							creatCarOrder(parmes).then(res=>{
								uni.hideLoading();
								uni.showToast({title:'提交成功',icon:'none'})
								if(res.data.order_id){
									setTimeout(function(){
										uni.redirectTo({
											url:'/pages/car_sub/order/payment?order_id='+res.data.order_id
										})
									},800)
								}
							}).catch(err=>{
								that.is_submit=false;
								uni.hideLoading();
								uni.showToast({title:err,icon:'none'})
							})
				        }
				    }
				});
			},
			//车辆信息
			getCarTypeInfo() {
				var that = this;
				let data = {
					car_type_id: that.car_type_id
				}
				getCarTypeInfo(data).then(res => {
					that.car_info = res.data;
				}).catch(err => {
					uni.showToast({title: '数据错误',icon: 'none'})
				})
			},
			//选择保险
			radioChange: function(evt) {
				// if(this.pre_radio_index!=''){
				// 	this.order_data.car_service[this.pre_radio_index].is_select = false;
				// }
				// this.pre_radio_index = evt.detail.value;
				// this.order_data.car_service[evt.detail.value].is_select = true;
				// this.getCountPrice();
			},
			selectService(index){
				if(index === this.pre_radio_index){
					this.pre_radio_index = '';
					this.order_data.car_service[index].is_select = false;
				}else{
					this.order_data.car_service.forEach(item=>{
						item.is_select = false;
					})
					this.pre_radio_index = index;
					this.order_data.car_service[index].is_select = true;
				}
				this.getCountPrice();
			},
			//车辆租金
			getCareFee() {
				var that = this;
				let area_site = that.DateTimeSite;
				let data = {
					store_id: that.store_id, //下单门店
					take_place_id: area_site.area_id, //取车服务点
					return_place_id: area_site.black_area_id, //还车服务点
					is_other_places: area_site.is_other_places, //是否异店还车
					type_id: that.car_type_id, //下单车型
					start_time: that.orderTime.starStamp, //开始时间
					end_time: that.orderTime.endStamp ,//结束时间
					is_visit:area_site.is_visit,       //是否上门送取车
					take_latitude:area_site.take_latitude,
					take_longitude:area_site.take_longitude,
					return_latitude:area_site.black_latitude,
					return_longitude:area_site.black_longitude,
				}
				getCareFee(data).then(res => {
					that.order_data.fee = res.data;
					that.getCouponList();
				}).catch((err)=>{
					uni.showToast({ title:err, icon:'none' })
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			//车辆保险
			getcarService() {
				var that = this;
				let data = {
					car_type_id: that.car_type_id,
					start_time: that.orderTime.starStamp,
					end_time: that.orderTime.endStamp
				}
				getcarService(data).then(res => {
					that.order_data.car_service = res.data
				})
			},

			ChangCouponsClone: function() {
				this.$set(this.coupon, 'coupon', false);
			},
			couponTap: function() {
				this.coupon.coupon = true;
				this.coupon.list.forEach((item, index) => {
					if (item.id == this.couponId) {
						item.is_use = 1
					} else {
						item.is_use = 0
					}
				})
				this.$set(this.coupon, 'list', this.coupon.list);
			},
			// 获取可用优惠券
			getCouponList: function() {
				let that = this,
					obj = {
						price: this.order_data.fee.car_fee,   //基本租车费用
					};
				get_use_coupon_list(obj).then(res => {
					that.$set(that.coupon, 'list', res.data);
					let index = res,
						list = this.coupon.list,
						couponTitle = '请选择优惠券',
						couponId = 0,
						use_min_price = 0,
						coupon_price = 0;
					for (let i = 0, len = list.length; i < len; i++) {
						if (i != index) {
							list[i].use_title = '';
							list[i].is_use = 0;
						}
					}
				});
			},
			// 处理点击优惠券后的事件
			ChangCoupons: function(e) {
				let index = e,
					list = this.coupon.list,
					couponTitle = '请选择优惠券',
					couponId = 0,
					use_min_price = 0,
					coupon_price = 0;
				for (let i = 0, len = list.length; i < len; i++) {
					if (i != index) {
						list[i].use_title = '';
						list[i].is_use = 0;
					}
				}
				if (list[index].is_use) {
					//不使用优惠券
					list[index].use_title = '';
					list[index].is_use = 0;
				} else {
					//使用优惠券
					list[index].use_title = '不使用';
					list[index].is_use = 1;
					couponId = list[index].id;
					coupon_price = list[index].coupon_price;
					use_min_price = list[index].use_min_price;
					couponTitle = '-￥' + coupon_price;
				}
				this.couponTitle = couponTitle;
				this.use_min_price = use_min_price;
				this.coupon_price = coupon_price;
				this.couponId = couponId;
				this.$set(this.coupon,'coupon',false);
				this.$set(this.coupon, 'list', list);
				this.getCountPrice();
			},

			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				//小程序 配置
				uni.getSystemInfo({
					success(res) {
						that.recHeight = res.statusBarHeight; //获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
			},
			//
			changeCheck(i) {
				this.order_data.car_service[i].is_select = !this.order_data.car_service[i].is_select;
				this.getCountPrice();
			},
			//
			changeSwitch: function(e) {
				
			},
			// 计算使用优惠卷和选择保险后的价格
			getCountPrice() {
				var car_service = this.order_data.car_service;
				var price = this.order_data.fee.original_price;
				for (var i = 0; i < car_service.length; i++) {
					if (car_service[i].is_select) {
						price = `${(parseFloat(price) + parseFloat(car_service[i].price)).toFixed(2)}`;
					}
				}
				if(this.couponId>0){
					price = `${(parseFloat(price) - parseFloat(this.coupon_price)).toFixed(2)}`;
				}
				if(price <= 0) price = 0.01;
				this.order_data.fee.price = price;
			},

			//联系
			callPhone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				})
			},
			//付款
			pay(status) {
				
			},
			//展示取车、还车弹窗
			showTimePicker(type, nav_type) { // 0取车  1还车
				this.$refs.timePicker.picker_modal = true;
				this.$refs.timePicker.time_type = type;
				this.$refs.timePicker.nav_type = nav_type;
				this.$refs.timePicker.getDay(210);
				this.$refs.timePicker.calTimes();
				if (this.DateTime.start_time) {
					this.$refs.timePicker.start_time = this.DateTime.start_time;
					this.$refs.timePicker.end_time = this.DateTime.end_time;
				}
			},
			//获取取车、还车时间
			getTime(date) {
				this.DateTime.start_time = date.starTime.starTime;
				this.DateTime.end_time = date.endTime.endTime;
				this.DateTime.starDay = date.starTime.date.date;
				this.DateTime.endDay = date.endTime.date.date;
				this.DateTime.starTime = date.starTime.time;
				this.DateTime.endTime = date.endTime.time;
				this.DateTime.starMon = date.starTime.date.month;
				this.DateTime.endMon = date.endTime.date.month;
				this.DateTime.startDate = date.starTime.date.year + '-' + date.starTime.date.month + '-' + date.starTime.date.date + ' ' + date.starTime.time;
				this.DateTime.endDate = date.endTime.date.year + '-' + date.endTime.date.month + '-' + date.endTime.date.date + ' ' + date.endTime.time;
				this.newDateTime = date.endTime.date.year + '-' + date.endTime.date.month + '-' + date.endTime.date.date + ' ' + date.endTime.time;
				let OD = new Date(this.oldDateTime).getTime();
				let ND = new Date(this.newDateTime).getTime();
				let check = ND - OD;
				if (check < 86400000) {
					this.DateTime.endDate = '';
					this.newDateTime = '';
					this.$refs.timePicker.picker_modal = false
					return uni.showToast({title: '续租日期不能少于一天',icon: "none"});
				}
				let endList = date.endTime.time.split(':'); //分割时间
				this.DateTime.endStamp = new Date(date.endTime.date.year, (date.endTime.date.month - 1), date.endTime.date.date).getTime();
				let starList = date.starTime.time.split(':'); //分割时间
				this.DateTime.starStamp = new Date(date.starTime.date.year, (date.starTime.date.month - 1), date.starTime.date.date).getTime();
				let diffDate = this.DateTime.endStamp - this.DateTime.starStamp;
				this.DateTime.days = Math.floor(diffDate / (1000 * 3600 * 24))
				this.$refs.timePicker.picker_modal = false;
				this.submit();
			},
			// 获取店铺信息
			getStoreInfo(){
				let that = this;
				let param = {
					store_id: that.store_id
				}
				getStoreInfo(param).then((res)=>{
					that.storeInfo = res.data;
					let date = new Date((that.orderTime.starStamp - 86400) * 1000);
					let month = date.getMonth() + 1;
					if(month < 10) month = "0"+month;
					let day = date.getDate();
					if(day < 10) day = "0"+day;
					let hour = date.getHours();
					if(hour < 10) hour = "0"+hour;
					let minute = date.getMinutes();
					if(minute < 10) minute = "0"+minute;
					let time = month+'月'+day+'日 '+hour+':'+minute;
					that.storeInfo.cancelTime = time + '前';
				}).catch((err)=>{
					uni.showToast({title:err,icon:'none'})
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.root {
		width: 100%;
		padding-bottom: 200rpx;
	}

	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;

		//顶部导航栏
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
			background-color: #ffffff;
		}

		.header_title {
			width: 100%;
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}

		.img {
			position: absolute;
			top: 0;
			z-index: 10;
		}
	}

	.index {
		width: 100%;

		// height: 416rpx;
		.car-img-box {
			background-color: #fff;
			width: 100%;
			// height: 274rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 30rpx;

			.title {
				color: #333C4F;
				padding-left: 20rpx;
				font-weight: 600;
			}

			.label {
				padding-left: 20rpx;
			}

			.car-img {
				width: 400rpx;
				height: 274rpx;
			}
		}

		.order-info {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;
			color: #101010;
			font-size: 28rpx;

			.address {
				border-bottom: 1rpx solid #EEEEEE;
			}

			.time {
				border-bottom: 1rpx solid #EEEEEE;
			}
		}

		.use-car {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;

			.right {
				background: -webkit-linear-gradient(-88.58deg,#69D6F5,#98E8A8);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 24rpx;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.guarantee {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;

			.title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.item {
				margin-top: 34rpx;
				display: flex;
				justify-content: space-between;

				.left {
					width: 486rpx;

					.sort-title {
						color: #333;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						font-weight: 600;

						.iconfont {
							margin-left: 14rpx;
							font-weight: 500;
						}
					}

					.txt {
						margin-top: 14rpx;
						color: #999;
						font-size: 26rpx;
					}
				}

				.right {
					flex: 1;
					padding-left: 64rpx;
					padding-top: 6rpx;
					display: flex;
					justify-content: space-between;

					.num {
						color: #FF3535;
						font-size: 26rpx;
					}
				}
			}
		}

		.coupon {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;

			.title {
				color: #101010;
				font-size: 36rpx;
				font-weight: 600;

				.iconfont {
					font-weight: 500;
					margin-left: 8rpx;
				}
			}

			.search-coupon {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 36rpx;

				.sort-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}

				.num {
					display: flex;
					align-items: center;

					.price {
						color: #FF3535;
						font-size: 28rpx;
						// &::before {
						// 	content: '-￥';
						// 	font-size: 24rpx;
						// }
					}

					.iconfont {
						font-size: 24rpx;
						color: #cccccc;
						margin-left: 4rpx;
					}
				}
			}

			.integral {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 36rpx;

				.sort-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;

					.label {
						color: #999999;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

				switch {
					position: absolute;
					right: 0;
				}
			}
		}

		.deposit {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;

			.title {
				display: flex;
				align-items: center;

				.text {
					color: #101010;
					font-size: 36rpx;
					font-weight: 600;
					width: 232rpx;
					position: relative;
					padding-right: 24rpx;
					display: flex;
					align-items: center;
					margin-right: 24rpx;

					&::after {
						content: '';
						width: 1rpx;
						height: 30rpx;
						// border-right: 1rpx solid #999;
						position: absolute;
						right: 0;
					}
				}
			}

			.li-1,
			.li-2 {
				margin-top: 36rpx;

				.sort-title {
					color: #333333;
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.li-1 {
				.text {
					margin-top: 10rpx;
					color: #999999;
					font-size: 26rpx;
					padding-right: 52rpx;
				}
			}

			.li-2 {
				.content {
					display: flex;
					flex-direction: column;
					width: 100%;
					padding-left: 60rpx;
					padding-right: 50rpx;

					.item {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
						color: #999;

						.left {
							margin-right: 34rpx;
							flex-shrink: 0;
							font-size: 28rpx;
						}

						.right {
							font-size: 26rpx;

							.price {
								margin-bottom: 4rpx;
							}
						}
					}
				}
			}
		}

		.rules {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;
			padding-bottom: 50rpx;

			.title {
				color: #101010;
				font-size: 36rpx;
				font-weight: 600;
			}

			.li-1 {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.left {
					width: 112rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}

				.right {
					flex: 1;

					.sort-title {
						color: #333333;
					}

					.table {
						font-size: 26rpx;
						margin-top: 20rpx;
						width: 100%;
						border: 1px solid #f9f9f9;
						background-color: #FDFBF8;

						.tr,
						.tfoot {
							padding: 30rpx 28rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.tr {
							border-bottom: 1rpx solid #F9F9F9;
							width: 100%;
						}

						.tfoot {
							color: #999999;
						}
					}
				}
			}

			.li-2 {
				margin-top: 66rpx;
				display: flex;

				.left {
					width: 112rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}

				.right {
					flex: 1;

					.table {
						width: 100%;
						border: 1px solid #f9f9f9;
						font-size: 26rpx;

						.thead,
						.tr {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							background-color: #FDFBF8;
							padding: 30rpx 24rpx;

							.left {
								flex: 1;
							}

							.right {
								width: 240rpx;
							}
						}

						.tr {
							background-color: #ffffff;
						}
					}
				}
			}

			.li-3 {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.left {
					width: 112rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}

				.right {
					flex: 1;
				}
			}

			.li-4 {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.left {
					width: 112rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}

				.right {
					flex: 1;
				}
			}

			.li-5 {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.left {
					width: 112rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}

				.right {
					flex: 1;
				}
			}
		}

		.contact {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
		}

		.contract {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
		}

		.xuzhu {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 0rpx;
			color: #101010;
			font-size: 28rpx;
			font-weight: 600;

			.now {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				border-bottom: 1rpx solid #f9f9f9;
			}

			.revise {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;

				.iconfont {
					font-size: 22rpx;
				}
			}
		}
	}

	.call-phone {
		width: 90rpx;
		height: 40rpx;
		border-radius: 100px;
		// background-color: rgba(190, 157, 120, 1);
		color: rgba(255, 255, 255, 1);
		line-height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.pay {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.07);
		display: flex;
		z-index: 999;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;

		.left {
			flex: 1;
			flex-shrink: 0;
			padding-left: 20rpx;

			.price {
				display: flex;
				align-items: center;
				// background: -webkit-linear-gradient(-88.58deg,#69D6F5,#98E8A8);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				font-size: 26rpx;

				.num {
					color: #FF3535;
					font-size: 36rpx;
					font-weight: 600;
					margin-right: 16rpx;
				}

				.icon {
					width: 40rpx;
					transform: rotateZ(-90deg);
					position: relative;
					top: -6rpx;
					left: -6rpx;

					.iconfont {
						font-size: 24rpx;
						position: absolute;
						top: 0;
					}
				}
			}

			.remark {
				color: #999999;
				font-size: 26rpx;
			}

		}

		.right {
			width: 304rpx;
			height: 100%;
			background: linear-gradient(-88.58deg,var(--theme-color-left),var(--theme-color-right));
			// color: #ffffff;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.right-xuzhu {
			width: 304rpx;
			height: 100%;
			background-color: rgba(192, 192, 192, 1);
			color: #ffffff;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.price_detail {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(16, 16, 16, 0.6);
		z-index: 990;
		animation: show 0.7s;

		@keyframes show {
			0% {
				top: 800rpx;
			}

			100% {
				top: 0;

			}
		}

		.detail {
			width: 100%;
			// height: 792rpx;
			background-color: #ffffff;
			position: absolute;
			bottom: 150rpx;
			padding-bottom: 30rpx;
			border-radius: 20rpx 20rpx 0px 0px;

			.title {
				width: 100%;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 36rpx;
				color: #101010;
				border-bottom: 1rpx solid #f7f7f7;
			}
		}
	}

	//短标题默认样式
	.sort-title {
		color: #999999;
		font-size: 28rpx;
	}
</style>
